<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
 <%@ include file="/common/taglibs.jsp" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>管理员登陆</title>
<style type="text/css">
/*outside 13/09/14*/
body {
	margin: 0px;
  background: url(${ctx}/images/login/Logininterface_body_bg_p.png) repeat;
}
a{
  cursor: pointer;
}
/******* clearfix ********/
.clearfix:after{
  content:"";
  clear:both;
  display:block;
  height:0;
  visibility:hidden;
  line-height:0;
}
.clearfix{
  zoom:1;
}
.header{
  width: 962px;
  height: 302px;
  margin: 0 auto;
  padding: 72px 0 0 230px;
  background: url(${ctx}/images/login/Logininterface_body_picture_p.png) no-repeat;
}
.header .logo{
  width: 640px;
  height:152px;
/*   background: url(${ctx}/images/login/header_logo_p.png) no-repeat;} */
 background: url(${ctx}/images/login/header_logo_p1.png) no-repeat;}
.content{
  width: 1300px;
  margin: 0 auto;
  height:170px;
  /*background: url(images/login/Logininterface_body_p.png) repeat-x;*/
}
.content form{
  width: 590px;
  margin: 0 auto;
}
.content .login_massage{
  float: left;
  width: 410px;
  padding-top: 22px;
}
.content .login_massage .login_classify{
  position: relative;
  margin-bottom: 30px;
}
.content .login_massage .login_classify .ct_tip{
  position: absolute;
  left: 76px;
  top: 36px;
  top:39px\9;
  
}
.content .login_massage .login_classify .ct_tip div{
  padding-left: 18px;
  background: url(${ctx}/images/body_tips_false_p.png) 0 3px no-repeat;
}
.content .login_massage label{
  float: left;
  display: inline-block;
  font-size: 14px;
  line-height: 32px;
  margin-right: 10px;
  width: 65px;
  text-align: right;
  color: #b8dcfb;
}
.content .login_massage input{
  width: 320px;
  height: 18px;
  padding: 5px;
}
.content .login_massage .code_text{
  width:154px;
}
.content .login_massage .code_pic{
  float: right;
  margin-left: 15px;
  width: 143px;
  height: 32px;
}
.content .login_massage .code_change{
  clear: both;
  float: right;
  margin: 5px 11px;
  color: #002188;
  font-size: 14px;
  text-decoration: underline;
}



.content .login_sure a{
  float: left;
  text-indent: -999px;
  width: 148px;
  height: 122px;
  margin: 22px 0 0 13px;
  background: url(${ctx}/images/login/body_button_normal_p.png) no-repeat;
}
.content .login_sure a:hover{
  background: url(${ctx}/images/login/body_button_active_p.png) no-repeat;
}
</style>
</head>

<body onload="response(<%=request.getParameter("error")%>);">
  <div id="wrapper">
    <div class="header">
      <div class="logo"></div>
    </div>
    <div class="content">
      <form  method="post" name="login" action="${ctx }/admin/j_check" mathod="post" target="_top" id="form">


      <!-- 表单提交 -->
        <div class="login_massage">
          <div class="login_classify">
            <label class="text" for="text">账号:</label>
            <input input name="j_username" type="text" id="text" value="admin" />
            <div id="tip_text" class="ct_tip"></div>
          </div>
          <div class="login_classify clearfix">
            <label class="password" for="password">密码:</label>
            <input name="j_password" type="password" id="password" />
            <div id="tip_password" class="ct_tip"></div>
          </div>
          <div class="login_classify clearfix">
            <label for="login_check">验证码:</label>
            <div>
              <img src="${ctx }/security/jcaptcha.jpg" onclick="onImageClick(this)" class="code_pic" title="换一换" />
              <input name="j_captcha"  type="text" id="login_check" class="code_text" />
              <div id="tip_code" class="ct_tip"></div>
            </div>
          </div>
        </div>
        <div class="login_sure"><a class="ac_account">登录</a></div>
        <input type="submit" id="submit" style="display:none;" />
      </form>
    </div>
  </div>
  <script type="text/javascript" src="${ctx}/js/public.js"></script>
    <script type="text/javascript">
    function onImageClick(o){
		    o.src = "${ctx}/security/jcaptcha.jpg?"+ new Date();
		}
    //input jugde
    var user = document.getElementById("text"),
        password = document.getElementById("password"),
        tip_name = document.getElementById("tip_text"),
        tip_password = document.getElementById("tip_password"),
        tip_code = document.getElementById("tip_code"),
        login_check = document.getElementById("login_check"),
        submit = document.getElementById("submit");

    //temp for account button
    var temp_1 = 1;


    //get classname
    var name_class = newdom.getElementsByClass('text')[0],
        password_class = newdom.getElementsByClass('password')[0],
        ac_account = newdom.getElementsByClass("ac_account")[0];

    //function add content to obj 
    var add_content = function(obj,text){
        obj.innerHTML = text;
    }

    //for password jugde
    password.onfocus = function(){

        add_content(tip_password,
                "<div>请输入密码,密码长度不小于4位</div>"
        )
    }
    password.onblur = function(){
      if(password.value.length < 4){
           add_content(tip_password,'<div style="color:#C00000;">密码长度必须大于4位</div>')    
           temp_1 = 1;  
      }
      else{
           add_content(tip_password,'<div class="yes_picture"></div>') 
           temp_1 = 11;    
      }
    }

    function submit_click(){
        if(temp_1 == 11){
          //进行异步验证，验证表单接口在函数loadXMLDoc处;
          //password.value是密码 login_check.value验证码
        submit.click();
        }
        else{
            if(temp_1 == 1){     
              add_content(tip_password,'<div>密码长度必须大于4位</div>')  
            }
        }
    }
    document.onkeydown = function(e){//window onkeydown ie不兼容
      var _e = window.event ? window.event : e || arguments[0]; 
      if(_e.keyCode == 13){
	      if(password.value.length < 4){
	           add_content(tip_password,'<div style="color:#C00000;">密码长度必须大于4位</div>')    
	           temp_1 = 1;  
	      }
	      else{
	           add_content(tip_password,'<div class="yes_picture"></div>') 
	           temp_1 = 11;    
	      }
        submit_click();
      }
    }
    ac_account.onclick = function(){
        submit_click();
    }
    function response(e){
			if(e == '2' ){
					 add_content(tip_code,"<div>验证码错误</div>")  
			
			}
			if(e == '1' ){
				 add_content(tip_password,"<div>密码错误，请输入密码</div>")  
			}
		}
  </script>

</body>
</html>


